<template>
    <a-card :loading="loading">
      <search-bar :searchItems="searchItems" @search="searchHandle" :selectOptionDatas="selectOptionDatas" />
      <table-page
        :table-cols="tableCols"
        :table-datas="tableDatas"
        :operationBtns="operationBtns"
        @operationHandel="operationHandel"
        :selectOptionDatas="selectOptionDatas"
      />
      <pagination
        :total="params.total"
        :limit="params.limit"
        :page="params.page"
        @pagination="paginationHandel"
      />
    </a-card>
  </template>
  <script>
  import SearchBar from "@/components/SearchBar";
  import TablePage from "@/components/TablePage";
  import Pagination from "@/components/Pagination";
  
  export default {
    components: {
      SearchBar,
      TablePage,
      Pagination,
    },
    data() {
      return {
        loading: false,
        searchItems: [
          { key: "title", label: "模块标题" },
          { key: "businessType", label: "业务类型", type: "select" },
          { key: "operType", label: "操作类别", type: "select" },
          { key: "status", label: "操作状态", type: "select" },
        ],
        tableCols: [
          { title: "模块标题", dataIndex: "title" },
          { title: "业务类型", dataIndex: "businessType", type: "select" },
          { title: "方法名称", dataIndex: "method", ellipsis:true },
          { title: "请求方式", dataIndex: "requestMethod" },
          { title: "操作类别", dataIndex: "operType", type: "select" },
          { title: "操作人员", dataIndex: "operName" },
          { title: "请求URL", dataIndex: "operUrl" },
          { title: "主机地址", dataIndex: "operIp" },
          { title: "请求参数", dataIndex: "operParam", ellipsis:true},
          { title: "返回参数", dataIndex: "jsonResult", ellipsis:true},
          { title: "操作状态", dataIndex: "status", type: "select" },
          { title: "错误消息", dataIndex: "errorMsg" },
        ],
        operationBtns: [
          { key: "delete", label: "删除" }
        ],
        params: { total: 0, limit: 10, page: 0 },
        tableDatas: [],
        selectOptionDatas:{
            businessType: [ { label: "其它", value: 0 }, { label: "新增", value: 1 }, { label: "修改", value: 2 }, { label: "删除", value: 3 }],
            operType: [ { label: "其它", value: 0 }, { label: "后台用户", value: 1 }, { label: "中间件用户", value: 2 }],
            status: [ { label: "正常", value: 0 }, { label: "异常", value: 1 }],
        },
        formData: {},
        fromVisible: false,
      };
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        this.$store.dispatch("sys-log/queryLogList", this.params).then((res) => {
          this.tableDatas = res.list;
          this.params.total = res.totalCount;
        });
      },
      searchHandle(params) {
        this.params = { ...this.params, ...params };
        this.initData();
      },
      operationHandel(row, event) {
        var vm=this;
        if (event === "delete") {
          vm.$confirm({
            title: "确定要删除此记录吗？",
            onOk() {
              vm.$store.dispatch("sys-log/deleteLog", row.id).then(() => {
                vm.initData();
                vm.$message.success("删除成功！");
              });
            },
          });
        }
      },
      paginationHandel({ page, limit }) {
        this.params.page = page;
        this.params.limit = limit;
        this.initData();
      }
    },
  };
  </script>
  <style scoped>
  .ant-card {
    min-height: calc(100vh - 64px);
    margin: 24px 24px 0;
  }
  </style>